<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>数据表格 datagrid</title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<script type="text/javascript">
//			$(function() {
//				$("#grid").datagrid({ 
//					pageList:[1,2,3]
//				});
//			});
			
			function save() {
				alert("保存...");
			}
			
			function edit() {
				var rows = $("#grid").datagrid('getSelections');
//				if(rows.length >0) {
//					for(var i=0;i<rows.length;i++) {
//						alert(rows[i].id+" "+rows[i].name+" "+rows[i].price);
//					}
//				} else {
//					$.messager.alert("提示信息","您还没有选中编辑某行","warning");
//				}

				if(rows.length != 1){
						// 没选 或 多选 
					$.messager.alert("提示信息","修改数据时，只能选中一行","warning");
				}else{ 
					var row = $("#grid").datagrid('getSelected');
					alert(row.id+" "+row.name+" "+row.price);
				}

				
			}
		</script>
	</head>
	<body>
		
		<div id="tb">
			<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" onclick="save()">保存</a>
			<a id="edit" icon="icon-edit" href="#" class="easyui-linkbutton" plain="false" onclick="edit()">修改</a>
		</div>
		
		<!--数据表格-->
		<table id="grid" class="easyui-datagrid" url="product.json"  
			toolbar="#tb" rownumbers="true" pagination="true" pagePosition="top">
			<thead>
				<tr>
					<th field="abc" checkbox="true"></th>
					<th field="id" width="80">编号</th>
					<th field="name" width="80">商品名称</th>
					<th field="price" width="80">价格</th>
				</tr>
			</thead>
		</table>
	</body>
	
	<!-- pageNumber 7571   9434
		8692 page rows
		10055 page rows
		响应回来：total   rows    8677  data.total  data.rows
		9470
	-->
</html>
